<template>
  <div class="father">
    {{ valueMsg }}
    <br>
    <input type="text" v-model="valueMsg">
    <h2>游戏列表</h2>
    <div class="conent">
      <slotValueChild>
        <template v-slot:qwert="params">
          <ul>
            <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
          </ul>
        </template>
      </slotValueChild>
      <slotValueChild>
        <template #qwert="{ games }">
          <ol>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ol>
        </template>
      </slotValueChild>
      <slotValueChild>
        <template #default="params">
          <h3 v-for="g in params.games" :key="g.id">{{ g.name }}</h3>
        </template>
      </slotValueChild>
    </div>
  </div>
</template>
<script setup lang='ts'>
import slotValueChild from "./slotValueChild.vue";
import { ref, reactive, customRef } from "vue";
import useValueMsgRef from "../hooks/useValueMsgRef";
//使用ref来定义一个响应式数据,数据一变，页面就更新
// let valueMsg = ref("你好")
//使用useValueMsgRef来定义一个响应式数据且有延迟效果
let {valueMsg} = useValueMsgRef("山沟沟",1500)
</script>
<style scoped>
.father {
  width: 100%;
  height: 400px;
  border: 1px solid red;
  /* text-align: center; */
}

h2 {
  text-align: center;
}

.conent {
  display: flex;
  justify-content: space-evenly;
}

.conent div {
  width: 30%;
  height: 300px;
  border: 1px solid red;
}
</style>